<template>
  <div class="reporting-details-container">
    <h3 class="section-title">报工明细</h3>
    <el-table :data="data" border stripe style="width: 100%">
      <el-table-column prop="workOrderNo" label="工单号" sortable width="180" />
      <el-table-column prop="itemCode" label="品号" sortable width="200" />
      <el-table-column prop="productType" label="产品类型" width="200"/>
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="wipCompletedQty" label="在制品完成数量" align="right" header-align="center" width="150" />
      <el-table-column prop="wipScrappedQty" label="在制品报废数量" align="right" header-align="center" width="150" />
      <el-table-column prop="defectiveQty" label="不良数量" align="right" header-align="center" width="120" />
      <el-table-column prop="reworkQty" label="返工数量" align="center" width="120" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ProductionWorkOrderVO } from '@/api/productionworkorder';
import { ElTable, ElTableColumn } from 'element-plus';

// 定义 props
defineProps<{
  data: ProductionWorkOrderVO[];
}>();
</script>

<style scoped>
.reporting-details-container {
  margin-top: 20px;
}

.section-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}
</style>